<template>
    <div class="container">
        <!-- Main Content -->
        <main class="main-content">
            <div class="box-card">
                <div class="card-header">
                    <h1>学生综合服务管理系统</h1>
                    <p>欢迎使用学生综合服务管理系统，我们为您提供一站式的学生服务解决方案。</p>
                </div>
                <div class="card-body">
                    <div class="notice">
                        <h2>系统简介</h2>
                        <p>本系统旨在为学校提供高效的管理工具，帮助教职工和学生进行信息管理、服务查询等日常事务处理。</p>
                        <h2>子系统介绍</h2>
                        <h3>教材管理系统</h3>
                        <p>教材管理系统用于管理教材的采购、分发和库存情况。通过该系统，教师可以提交教材需求，管理员可以处理教材的采购和分配，学生可以查看教材信息并进行相关操作。</p>
                        <h3>在校生报到系统</h3>
                        <p>在校生报到系统提供学生报到、信息更新和档案管理等功能。学生可以进行在线报到，查看报到状态，管理员可以审核报到信息和管理学生档案。</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<style scoped>
/* Container Styles */
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    border: 1px solid #eee;
}

/* Main Content Styles */
.main-content {
    padding: 20px;
    flex: 1;
}

/* Card Styles */
.box-card {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
    margin-bottom: 20px;
}
</style>

<script>
export default {
    data() {
        return {
            // 可以在这里添加组件数据
        };
    }
};
</script>
